import React, { useEffect, useState } from "react";
import {
  Swiper,
  Image,
  NavBar,
  Toast,
  ProductCard,
  Tag,
  Button,
} from "react-vant";
import { DropdownMenu } from "react-vant";
import {useNavigate} from 'react-router-dom'
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  const [value, setValue] = useState<Record<string, string | number>>({});
  const navigate=useNavigate()
  const option1 = [
    { text: "全部", value: 0 },
    { text: "火爆区", value: 1 },
    { text: "正常区", value: 2 },
    { text: "低平区", value: 3 },
  ];

  useEffect(() => {
    axios.get("/api/hblist").then((resp) => {
      setList(resp.data.list);
    });
  }, []);
  const change = (v: any) => {
    let { value0 } = v;
    setValue(v);
    axios.get("/api/screen", { params: { value0 } }).then((resp) => {
      setList(resp.data.items);
    });
  };
  const xq=(v:any)=>{
    console.log(v)
    navigate(`/detail/${v}`)
  }
  return (
    <div>
      <div className="home">
        <NavBar title="火爆区" leftArrow={false} />
        <DropdownMenu value={value} onChange={(v) => change(v)}>
          <DropdownMenu.Item name="value0" options={option1} />
        </DropdownMenu>
        <div className="hbqq">
          {list.length > 0 &&
            list.map((v: any) => (
              <div key={v.id} onClick={()=>xq(v.id)}>
                <ProductCard
                  price={v.price}
                  desc={v.word}
                  title={v.title}
                  thumb={v.img}
                  tags={
                    <>
                      <Tag plain type="danger" style={{ marginRight: 5 }}>
                        {v.hbq}
                      </Tag>
                    </>
                  }
                />
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};
export default Index;
